<template>
  <el-drawer
    :title="titleMap[mode]"
    v-model="visible"
    :size="1000"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-container v-loading="loading">
      <el-main style="padding: 0 20px 20px 20px">
        <el-form
          ref="dialogForm"
          :model="form"
          :rules="rules"
          label-width="100px"
          label-position="top"
        >
          <sc-title title="基础"></sc-title>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-form-item label="表格名称" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入中文描述标题"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="标识" prop="code">
                <el-input
                  v-model="form.code"
                  placeholder="请输入唯一标识"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-form-item>
            <el-checkbox
              v-model="form.remoteSort"
              label="远程排序"
            ></el-checkbox>
            <el-checkbox
              v-model="form.remoteFilter"
              label="远程过滤"
            ></el-checkbox>
          </el-form-item> -->
          <sc-title title="表格列"></sc-title>
          <el-form-item prop="column">
            <sc-form-table
              v-model="form.column"
              :addTemplate="addTemplate"
              drag-sort
              placeholder="暂无数据"
            >
              <el-table-column prop="label" label="名称">
                <template #default="scope">
                  <el-input
                    v-model="scope.row.label"
                    placeholder="请输入名称"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="prop" label="字段" width="150">
                <template #default="scope">
                  <el-input
                    v-model="scope.row.prop"
                    placeholder="请输入字段"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="width" label="宽度" width="100">
                <template #default="scope">
                  <el-input
                    v-model="scope.row.width"
                    placeholder="请输入宽度"
                  ></el-input>
                </template>
              </el-table-column>
              <el-table-column
                prop="hide"
                label="隐藏"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-checkbox v-model="scope.row.hide"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column
                prop="sortable"
                label="排序"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-checkbox v-model="scope.row.sortable"></el-checkbox>
                </template>
              </el-table-column>
              <!-- <el-table-column
                prop="filters"
                label="过滤项"
                width="90"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    text
                    size="small"
                    :type="scope.row.filters.length == 0 ? '' : 'primary'"
                    @click="setFilters(scope.row.filters)"
                    >过滤项</el-button
                  >
                </template>
              </el-table-column> -->
              <el-table-column
                prop="fixed"
                label="固定"
                width="80"
                align="center"
              >
                <template #default="scope">
                  <el-checkbox v-model="scope.row.fixed"></el-checkbox>
                </template>
              </el-table-column>
            </sc-form-table>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <el-button type="primary" :loading="isSaveing" @click="submit"
          >保存</el-button
        >
        <el-button @click="visible = false">取消</el-button>
      </el-footer>
    </el-container>

    <el-drawer
      title="过滤项配置"
      v-model="setFiltersVisible"
      :size="500"
      destroy-on-close
    >
      <el-main style="padding: 0 20px 20px 20px">
        <sc-form-table
          v-model="selectionFilters"
          :addTemplate="filtersAddTemplate"
          drag-sort
          placeholder="暂无数据"
        >
          <el-table-column prop="text" label="名称">
            <template #default="scope">
              <el-input
                v-model="scope.row.text"
                placeholder="请输入名称"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="value" label="值" width="150">
            <template #default="scope">
              <el-input
                v-model="scope.row.value"
                placeholder="请输入值"
              ></el-input>
            </template>
          </el-table-column>
        </sc-form-table>
      </el-main>
    </el-drawer>
  </el-drawer>
</template>

<script>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      loading: false,
      mode: "add",
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      form: {},
      rules: {
        name: [{ required: true, message: "请输入表格名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入唯一标识", trigger: "blur" }],
      },
      addTemplate: {
        label: "",
        prop: "",
        width: "100",
        hide: false,
        sortable: false,
        fixed: false,
        filters: [],
      },
      visible: false,
      isSaveing: false,
      selectionFilters: [],
      filtersAddTemplate: {
        text: "",
        value: "",
      },
      setFiltersVisible: false,
    };
  },
  mounted() {},
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          sessionStorage.setItem("testcolumn", JSON.stringify(this.form));
          // var res = await this.$API.demo.post.post(this.form);

          this.isSaveing = false;
          if (true) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success("操作成功");
          } else {
            this.$alert(res.message, "提示", { type: "error" });
          }
        }
      });
    },
    //表单注入数据
    setData(data) {
      this.loading = true;
      const params = {
        id: data.id,
      };
      setTimeout(async () => {
        var res = null;
        // var res = await this.$API.system.table.info.get(params)
        if (sessionStorage.getItem("testcolumn") !== null) {
          res = JSON.parse(sessionStorage.getItem("testcolumn"));
        } else {
          res = {
            id: "1",
            name: "用户列表",
            code: "userList",
            remoteSort: true,
            remoteFilter: true,
            column: [
              {
                label: "ID",
                prop: "id",
                width: "80",
                hide: true,
                sortable: false,
                fixed: false,

                filters: [],
              },
              {
                label: "头像",
                prop: "avatar",
                width: "80",
                hide: false,
                type: "image",
                sortable: false,
                fixed: false,
                filter: true,
                filters: [
                  {
                    text: "未上传",
                    value: "0",
                  },
                  {
                    text: "已上传",
                    value: "1",
                  },
                ],
              },
              {
                label: "登录账号",
                prop: "userName",
                width: "150",
                hide: false,
                sortable: false,
                fixed: false,
                filters: [],
              },
              {
                label: "姓名",
                prop: "name",
                width: "150",
                hide: false,
                sortable: false,
                fixed: false,
                filters: [],
              },
              {
                label: "加入时间",
                prop: "date",
                width: "150",
                type: "date",
                timeType: "yyyy-MM-dd",
                hide: false,
                sortable: false,
                fixed: false,
                filters: [],
              },
              {
                label: "插槽测试",
                prop: "slot1",
                width: "150",
                type: "slot",
                slotName: "test111",
                hide: false,
                sortable: false,
                fixed: false,
                filters: [],
              },
              {
                label: "状态",
                type: "fontsColors",
                fontsList: [
                  { color: "#1890ff", name: "排队中", value: 0 },
                  { color: "green", name: "导出成功", value: 1 },
                  { color: "red", name: "导出失败", value: 2 },
                  { color: "orange", name: "正在执行", value: 3 },
                  { color: "gray", name: "导出关闭", value: 4 },
                ],
                prop: "fType",
                width: "150",
                hide: false,
                sortable: false,
                fixed: false,
                filters: [],
              },
            ],
          };
        }

        this.loading = false;
        this.form = res;
      }, 400);
    },
    //设置过滤项
    setFilters(filters) {
      this.selectionFilters = filters;
      this.setFiltersVisible = true;
    },
  },
};
</script>

<style></style>
